<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        /*未访问*/
        a:link {
            color: blue
        }

        /*访问过*/
        a:visited {
            color: crimson
        }

        /*悬停*/
        a:hover {
            color: purple
        }

        /*点击*/
        a:active {
            color: brown
        }
        .layout_aside i{
            color: white !important;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="background-color: #1684b0">
            <h1 style="color: white; font-size: 22px">
                EMS教育后台管理系统
                <span style="float: right;font-size: 15px">欢迎{{user.nickname}}回来!<a href="javascript:void(0)" @click="logout">退出登录</a></span>
            </h1>
        </el-header>
        <el-container>
            <el-aside class="layout_aside" width="200px" style="overflow: hidden">
                <el-menu style="height: 900px"
                         @select="handleSelect"
                         background-color="#2c3e50"
                         text-color="white"
                ><!--添加事件绑定-->
                    <el-menu-item index="1">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-submenu index="2"><!--index来定义位置-->
                        <!--添加菜单1标题名称并添加图标-->
                        <template slot="title">
                            <i class="el-icon-notebook-2"></i>
                            <span>课程管理</span>
                        </template>
                        <!--添加菜单1的2个子菜单选项-->
                        <el-menu-item index="2-1">课程信息</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3"><!--index来定义位置-->
                        <!--添加菜单1标题名称并添加图标-->
                        <template slot="title">
                            <i class="el-icon-s-custom"></i>
                            <span>教师管理</span>
                        </template>
                        <!--添加菜单1的2个子菜单选项-->
                        <el-menu-item index="3-1">教师列表</el-menu-item>
                        <el-menu-item index="3-2">录用教师</el-menu-item>
                        <el-menu-item index="3-3">教师授课管理</el-menu-item>
                        <el-menu-item index="3-4">教师信息查询</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4"><!--index来定义位置-->
                        <!--添加菜单1标题名称并添加图标-->
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span>学生管理</span>
                        </template>
                        <!--添加菜单1的2个子菜单选项-->
                            <el-menu-item index="4-1"><i class="el-icon-circle-plus-outline"></i>退学信息列表

                            </el-menu-item>
                            <el-menu-item index="4-2">  <i class="el-icon-user-solid"></i>学生基本信息
                            </el-menu-item>
                        <el-menu-item index="4-3" @click="select()">  <i class="el-icon-user-solid"></i>查询学生基本信息
                        </el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-submenu index="5"><!--index来定义位置-->
                        <!--添加菜单1标题名称并添加图标-->
                        <template slot="title">
                            <i class="el-icon-document-checked"></i>
                            <span>成绩管理</span>
                        </template>
                        <!--添加菜单1的2个子菜单选项-->
                        <el-menu-item index="5-1">分类列表</el-menu-item>
                        <el-menu-item index="5-2">添加分类</el-menu-item>
                    </el-submenu>
                    <el-submenu index="6"><!--index来定义位置-->
                        <!--添加菜单1标题名称并添加图标-->
                        <template slot="title">
                            <i class="el-icon-loading"></i>
                            <span>校园新闻</span>
                        </template>
                        <!--添加菜单1的2个子菜单选项-->
                        <el-menu-item index="6-1">分类列表</el-menu-item>
                        <el-menu-item index="6-2">添加分类</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <h1 v-if="currentIndex=='1'">欢迎来到学生管理系统!</h1>
                <el-dialog
                        title="添加课程信息"
                        :visible.sync="dialogVisible"
                >
                    <el-form label-width="80px">
                        <el-form-item label="课程名称">
                            <el-input v-model="c.name"></el-input>
                        </el-form-item>
                        <el-form-item label="所属系">
                            <el-input v-model="c.dept"></el-input>
                        </el-form-item>
                        <el-form-item label="年级">
                            <el-select v-model="c.year">
                                <el-option label="大一" value="大一"></el-option>
                                <el-option label="大二" value="大二"></el-option>
                                <el-option label="大三" value="大三"></el-option>
                                <el-option label="大四" value="大四"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="教师">
                            <el-input v-model="c.teacher"></el-input>
                        </el-form-item>
                        <el-form-item label="上课时间">
                            <el-select v-model="c.times">
                                <el-option label="周一第一节" value="周一第一节"></el-option>
                                <el-option label="周一第二节" value="周一第二节"></el-option>
                                <el-option label="周一第三节" value="周一第三节"></el-option>
                                <el-option label="周一第四节" value="周一第四节"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="上课地点">
                            <el-input v-model="c.loc"></el-input>
                        </el-form-item>
                        <el-form-item label="学分">
                            <el-input v-model="c.credit"></el-input>
                        </el-form-item>
                        <el-form-item label="课程类型">
                            <el-select v-model="c.type">
                                <el-option label="必修" value="必修"></el-option>
                                <el-option label="选修" value="选修"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="courseInsert()">确 定</el-button>
                    </div>
                </el-dialog>
                <el-button v-if="currentIndex=='2-1'" type="primary" icon="el-icon-plus" style="margin-bottom: 10px"
                           @click="dialogVisible = true">创建
                </el-button>
                <el-table v-if="currentIndex=='2-1'"
                          :data="courseArr"
                          stripe
                          style="width: 100%">
                    <el-table-column prop="id" label="课程编号" width="100px"></el-table-column>
                    <el-table-column prop="name" label="课程名称"></el-table-column>
                    <el-table-column prop="dept" label="所属系"></el-table-column>
                    <el-table-column prop="year" label="年级"></el-table-column>
                    <el-table-column prop="teacher" label="教师"></el-table-column>
                    <el-table-column prop="times" label="上课时间"></el-table-column>
                    <el-table-column prop="loc" label="上课地点"></el-table-column>
                    <el-table-column prop="credit" label="学分"></el-table-column>
                    <el-table-column prop="type" label="课程类型"></el-table-column>
                    <el-table-column label="操作">
                        <!--scope里面装着当前行所对应的对象信息
                        scope.$index 得到当前行对应的对象在数组中的下标
                        scope.row 得到当前行对应的对象
                        -->
                        <template slot-scope="scope">
                            <el-button size="mini" @click="courseUpdate(scope.row)"
                                       type="success">修改
                            </el-button>
                            <el-popconfirm
                                    title="您确定删除此课程吗？"
                                    @confirm="courseDel(scope.$index, scope.row)"
                            >
                                <el-button slot="reference"
                                           size="mini"
                                           type="danger">删除
                                </el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-if="currentIndex=='3-1'"
                          :data="teacherArr"
                          stripe
                          style="width: 100%">
                    <!--type=index  设置这一列显示的内容为编号-->
                    <el-table-column type="index" label="编号" width="120">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="gender" label="性别" width="120">
                    </el-table-column>
                    <el-table-column prop="age" label="年龄" width="120">
                    </el-table-column>
                    <el-table-column prop="number" label="联系电话" width="120">
                    </el-table-column>
                    <el-table-column prop="courseName" label="所属系" width="120">
                    </el-table-column>
                    <el-table-column prop="grade" label="班级" width="120">
                    </el-table-column>
                    <el-table-column prop="jobId" label="教师工号" width="120">
                    </el-table-column>
                </el-table>

                <el-dialog title="添加" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-form-item label="学生姓名:" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="学生年龄:" :label-width="formLabelWidth">
                            <el-input v-model="form.age" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="学生性别:" :label-width="formLabelWidth">
                            <el-input v-model="form.gender" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="学生专业:" :label-width="formLabelWidth">
                            <el-select v-model="form.major" placeholder="请选择专业">
                                <el-option label="计算机" value="计算机"></el-option>
                                <el-option label="工商管理" value="工商管理"></el-option>
                                <el-option label="应用化学" value="应用化学"></el-option>
                                <el-option label="地理科学" value="地理科学"></el-option>
                                <el-option label="生物科学" value="生物科学"></el-option>
                                <el-option label="统计学" value="统计学"></el-option>
                                <el-option label="市场营销" value="市场营销"></el-option>
                                <el-option label="人力资源管理" value="人力资源管理"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="学生联系电话:" :label-width="formLabelWidth">
                            <el-input v-model="form.phoneNumber" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="学生身份证:" :label-width="formLabelWidth">
                            <el-input v-model="form.identityCard" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="学号:" :label-width="formLabelWidth">
                            <el-input v-model="form.getId" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="入学时间:" :label-width="formLabelWidth">
                            <el-date-picker
                                    v-model="form.created"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="insert()">确 定</el-button>
                    </div>
                </el-dialog>

                <el-dialog title="添加" :visible.sync="dialogFormVisible1">
                    <el-form :model="form">
                        <el-form-item label="姓名:" :label-width="formLabelWidth">
                            <el-input v-model="form1.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="原因:" :label-width="formLabelWidth">
                            <el-input v-model="form1.cause" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="剩余学费:" :label-width="formLabelWidth">
                            <el-input v-model="form1.tuition" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="地址:" :label-width="formLabelWidth">
                            <el-input v-model="form1.address" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="退学时间:" :label-width="formLabelWidth">
                            <el-date-picker
                                    v-model="form1.created"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="insertDrop()">确 定</el-button>
                    </div>
                </el-dialog>
                <el-button type="success" @click="dialogFormVisible = true" v-if="currentIndex=='4-2'"><i
                        class="el-icon-plus"></i>录入学生信息
                </el-button>
                <template v-if="currentIndex=='4-2'">
                    <div style="float: right;position: relative">
                    姓名:
                    <el-input style="width: 200px;" v-model="input" placeholder="请输入学生名字"></el-input>
                        <el-button v-if="currentIndex=='4-2'" type="primary">开始搜索</el-button>
                        <el-button v-if="currentIndex=='4-2'" type="success">取消搜索</el-button>
                        </div>
                </template>
                <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
                <el-button type="success" @click="dialogFormVisible1 = true" v-if="currentIndex=='4-1'"><i
                        class="el-icon-plus"></i>录入退学名单
                </el-button>
                <el-divider></el-divider>
                <el-table style="margin-top: 80px" v-if="currentIndex=='4-2'"
                          :data="studentArr"
                          style="width: 100%">
                    <!--type=index 设置这一列显示的内容为编号-->
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="age"
                            label="年龄"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="gender"
                            label="性别"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="major"
                            label="专业"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="phoneNumber"
                            label="电话号码"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="identityCard"
                            label="身份证"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="getId"
                            label="学号"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="created"
                            label="添加时间"
                            width="180">
                    </el-table-column>

                    <el-table-column label="操作">
                        <!--scope里面装着当前行所对应的对象信息
                        scope.$index 得到当前行对应的对象在数组中的下标
                        scope.row 得到当前行对应的对象
                        -->
                        <template slot-scope="scope">
                            <el-button size="mini" @click="studentUpdate(scope.row)"
                                       type="success">修改
                            </el-button>
                            <el-popconfirm
                                    title="您确定删除此同学吗？"
                                    @confirm="studentDelete(scope.$index, scope.row)"
                            >
                                <el-button slot="reference" size="mini"
                                           type="danger">删除
                                </el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table style="margin-top: 80px" v-if="currentIndex=='4-1'"
                          :data="dropStudentArr"
                          style="width: 100%">
                    <!--type=index 设置这一列显示的内容为编号-->
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="major"
                            label="专业"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="cause"
                            label="原因"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="tuition"
                            label="剩余学费"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="created"
                            label="退学时间"
                            width="180">
                    </el-table-column>

                    <el-table-column label="操作">
                        <!--scope里面装着当前行所对应的对象信息
                        scope.$index 得到当前行对应的对象在数组中的下标
                        scope.row 得到当前行对应的对象
                        -->
                        <template slot-scope="scope">
                            <el-button size="mini" @click="dropStudentUpdate(scope.row)"
                                       type="success">修改
                            </el-button>
                            <el-button size="mini" @click="dropStudent()"
                                       type="success">查看
                            </el-button>
                            <el-popconfirm
                                    title="您确定删除此同学吗？"
                                    @confirm="dropStudentDelete(scope.$index, scope.row)"
                            >
                                <el-button  slot="reference" size="mini"
                                           type="danger">删除
                                </el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!--inport Axios Framework-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                size: '',
                currentIndex: "1",//默认1-1
                teacherArr: [],
                teacher: {},
                courseArr: [],
                dialogVisible: false,
                c: {},
                input: '',
                options: [{
                    value: '选项1',
                    label: '计算机'
                }, {
                    value: '选项2',
                    label: '工商管理'
                }, {
                    value: '选项3',
                    label: '应用化学'
                }, {
                    value: '选项4',
                    label: '地理科学'
                }, {
                    value: '选项5',
                    label: '生物科学'
                },
                    {
                        value: '选项4',
                        label: '地理科学'
                    },
                    {
                        value: '选项4',
                        label: '市场营销'
                    }, {
                        value: '选项4',
                        label: '人力资源管理'
                    }],
                value: '',
                form: {
                    name: '',
                    age: "",
                    gender: "",
                    major: "",
                    phoneNumber: "",
                    identityCard: "",
                    getId: "",
                    created: ""
                },
                form1: {
                    name: "",
                    cause: "",
                    tuition: "",
                    address: "",
                    created: "",
                    studentId: ""
                },
                dialogFormVisible: false,
                dialogFormVisible1: false,
                formLabelWidth: '120px',
                studentArr: [],
                user: {},
                dropStudentArr: [],
            }
        },
        methods: {
            select(){
              location.href="/selectStudent.html"
            },
            dropStudentUpdate(dropStudent){
                location.href="/updateDropStudent.html?id="+dropStudent.id;
            },
            dropStudentDelete(index,dropStudent){
                axios.get("/dropStudent/deleteById?id="+dropStudent.id).then(function () {
                        v.dropStudentArr.splice(index,1);
                })
            },
            insertDrop() {
                axios.post("/dropStudent/insertDrop", v.form1).then(function (response) {
                    location.reload();
                })
            },
            dropStudent() {
                location.href = "/schoolStudent.html";
            },
            insert() {
                axios.post("/student/insert", v.form).then(function () {
                    location.reload();
                })
            },
            studentUpdate(student) {
                location.href = "/updateStudent.html?id=" + student.id;
            },
            logout() {
                if (confirm("您确定要退出登录吗?")) {
                    axios.get("/logout").then(function () {
                        location.href = "/login.html";
                    })
                }
            },
            studentDelete(index, student) {
                axios.get("/student/delete?id=" + student.id).then(function (response) {
                    v.studentArr.splice(index, 1);
                })
            },
            addInfo() {
                location.href = "/insertStudent.html"
            },

            //修改课程
            courseUpdate(course) {
                location.href = "/updateCourse.html?id=" + course.id;
            },
            courseInsert() {
                //发出添加课程信息的请求
                axios.post("/course/insert", v.c).then(function () {
                    location.href = '/admin.html';
                })
            },
            courseDel(index, course) {
                //发请求删除课程
                axios.get("/course/delete?id=" + course.id).then(function () {
                    //删除数组中的元素(删除位置,删除数量)
                    v.courseArr.splice(index, 1);
                })
            },
            handleSelect(key, keyPath) {//菜单栏点击方法
                console.log(key);
                if (key == '3-2') {
                    location.href = "/insertTeacher.html";
                } else if (key == '3-3') {
                    location.href = "/TeacherClass.html"
                } else if (key == '3-4') {
                    location.href = "/selectTeacher.html";
                } else {
                    v.currentIndex = key;//否则通过点击的侧边菜单栏位置key值来执行对应的方法
                }
            }
        },
        //进入页面发送请求
        mounted: function () {
            //请求列表所有教师信息
            axios.get("/teacher/select").then(function (response) {
                v.teacherArr = response.data;
            })
            //发请求获取所有课程信息
            axios.get("/course/select").then(function (response) {
                v.courseArr = response.data;
            })
            axios.get("/student/select").then(function (response) {
                v.studentArr = response.data;
            })
            //发请求获取当前登录的用户对象
            axios.get("/currentUser").then(function (response) {
                v.user = response.data;
                if (v.user == "") {
                    alert("请先登录!")
                    location.href = "/login.html";
                }
            })
            axios.get("/dropStudent/select").then(function (response) {
                v.dropStudentArr = response.data;
            })
        }
    })
</script>
</html>